<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统（学生）</title>
    <!--css-->
    <link rel="stylesheet" href="../static/css/bootscript.min.css" th:href="@{/css/bootscript.min.css}"/>
    <link rel="stylesheet" href="../static/css/test.css" th:href="@{/css/test.css}"/>
    <!--js-->
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--file-input-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/piexif.min.js" type="text/javascript"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
        }

        a {
            color: #b63b4d;
            text-decoration: none;
            font-family: "微软雅黑";
        }

        .nav {
            list-style: none;
            width: 100%;
            margin: 0px 0px; /*改变菜单到页面的位置*/

        }

        .nav > li {
            position: relative;
            border: 1px solid #e6e6e6;
            line-height: 35px;
            border-bottom: none;
            border-radius: 10px;
        }

        .nav > li > a {
            margin-left: 5px;
            color: #000;
            font-weight: bold;
            /*background-color: red;*/
        }

        .nav > li > span {
            font-size: 20px;
            float: right;
            position: absolute;
            right: 50px;
        }

        .nav > li > ul {
            list-style: none;
            background-color: white;
            border-bottom: 1px solid #fff;
            display: none;

        }

        .nav > li > ul > li {
            border-bottom: 1px solid white;
            margin: 0px 0px 0px 7px;
            border-radius: 5px;
        }

        .nav > li > ul > li:hover {
            background-color: #CCEEFF;
            cursor: pointer;
        }

        .nav > li > ul > li > a {
            color: black;
            box-sizing: border-box;
            margin-left: 20px;
        }

        .deg {
            transform: rotate(90deg);
        }

        .yxy {
            width: 100%;
            height: 960px;
        }

        .yxy-left {
            width: 14%;
            height: 100%;
            background-color: white;
            float: left;
        }

        .yxy-right {
            width: 86%;
            height: 100%;
            background-color: white;
            float: left;
        }

        .d1 {
            background-color: rgb(44, 167, 186);;
            height: 45px;
            color: white;
            font-size: 15px;
            padding: 10px;
        }
        img{
            height: 30px;
            width: 30px;
            border-radius: 20px 20px 20px 20px;
        }

        .nav > li > a{
            color: rgb(102, 102, 102);
            margin: 0px 0px 0px 3%;
        }

        .nav > li > a:hover {
            background-color: rgb(44, 167, 186);
            color: white;
            cursor: pointer;
            border-radius: 10px;
        }

    </style>
</head>
<body>
<div class="d1">
    <div class="d2">
        <span>学生信息管理系统</span>
        <span style="margin: 0px 0px 0px 70%;">用户：</span>
        <span th:text="${username}"></span>
        <span style="margin: 0px 0px 0px 15px">职务：</span>
        <span>学生</span>
    </div>
</div>
<div class="yxy">
    <div class="yxy-left">
        <ul class="nav">
            <li><a href="#" >&#9776;&nbsp;个人中心</a>
                <ul>
                    <li><a th:href="@{/person/edit1(username=${username})}" target="iframe_a">个人</a></li>
                </ul>
            </li>
            <li><a href="#" >&#10163;&nbsp;个人请假</a>
                <ul>
                    <li><a th:href="@{/vacation/index(username=${username})}" target="iframe_a">请假列表</a></li>
                </ul>
            </li>
            <li><a href="#" >&#9758;&nbsp;个人成绩</a>
                <ul>
                    <li><a th:href="@{/studentScore/index(username=${username})}" target="iframe_a">成绩列表</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="yxy-right">
        <iframe th:src="@{/person/edit1(username=${username})}" id="iframe" height="100%" width="100%" frameborder="no" scrolling="no" allowtransparency="yes" name="iframe_a">

        </iframe>
    </div>
</div>
<script>

    $(function () {
        //给第一菜单设置点击事件
        $(".nav>li").click(function () {
            //获取第二菜单
            var sub = $(this).children("ul");
            //将第二菜单设置上下滑动动画
            sub.slideToggle(500);
            //给>箭头添加类转90度，向下
            $(this).children("span").toggleClass("deg");
            //点击一个菜单的时候，把它的兄弟元素的第一菜单收起来
            $(this).siblings().children("ul").slideUp(500);
            //箭头移除90度旋转的的类
            $(this).siblings().children("span").removeClass("deg");
        });
    });
</script>
</body>
</html>